<template>
	<div class="goods-list">

		<!--<router-link :to="'/home/goodsinfo/' + item.id" tag="div" class="goods-item" v-for="item in goodsList"
					 :key="item.id">
			<img :src="item.img_url" alt="">
			<h1 class="title">{{item.title}}</h1>
			<div class="info">
				<p class="price">
					<span class="now">¥{{item.sell_price}}</span>
					<span class="old">¥{{item.market_price}}</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩{{item.stock_quantity}}件</span>
				</p>
			</div>
		</router-link>-->

		<!--
			在网站中有两种跳转方式：
				方式1：使用 a 标签的形式，叫做标签跳转
				方式2：使用window.location.href 的形式，叫做编程式导航
		-->
		<div class="goods-item" v-for="item in goodsList" :key="item.id" @click="goDetail(item.id)">
			<img :src="item.img_url" alt="">
			<h1 class="title">{{item.title}}</h1>
			<div class="info">
				<p class="price">
					<span class="now">¥{{item.sell_price}}</span>
					<span class="old">¥{{item.market_price}}</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩{{item.stock_quantity}}件</span>
				</p>
			</div>
		</div>

		<mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>

	</div>
</template>

<script>

    import router from 'vue-router';

    export default {
        name: "GoodsList",
        // 这个data是往组件内部挂载【私有数据】的
        data() {
            return {
                pageIndex: 1,// 分页的页数
                goodsList: [], // 存放商品列表的数组
            }
        },
        created() {
            this.getGoodsList();
        },
        methods: {
            getGoodsList() { // 获取商品列表
                this.$http.get('api/getgoods?pageindex=' + this.pageIndex).then(result => {
                    if (result.body.status === 0) {
                        // this.goodsList = result.body.message;
                        this.goodsList = this.goodsList.concat(result.body.message);
                    }
                })
            },
            getMore() {
                this.pageIndex++;
                this.getGoodsList();
            },
            goDetail(id) { // 使用js形式进行路由导航
                /**
                 * 一定要区分 this.$route 和 this.$router这两个对象
                 * 其中：this.$route 是路由参数对象，所有路由中的参数 params、query 都属于它
                 * 其中：this.$router 是一个路由导航对象，用它可以方便的使用JS代码实现路由的前进、后退、跳转到新的URL地址
                 */
                // 1、最简单的
                // this.$router.push('/home/goodsinfo/' + id)

                // 2、传递对象
                // this.$router.push({path: '/home/goodsinfo/' + id})

                // 3、传递一个命名的路由
                // 命名的路由
                this.$router.push({name: 'goodsinfo', params: {id}})

            }
        }
    }
</script>

<style lang="less" scoped>
	.goods-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 6px;

		.goods-item {
			width: 49%;
			border: 1px solid #cccccc;
			box-shadow: 0 0 8px #cccccc;
			margin: 4px 0;
			padding: 2px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			min-height: 239px;

			img {
				width: 100%;
			}

			.title {
				font-size: 14px;
			}

			.info {
				background-color: #eeeeee;

				p {
					margin: 0;
					padding: 5px;
				}

				.price {
					.now {
						color: red;
						font-weight: bold;
						font-size: 16px;
					}

					.old {
						text-decoration: line-through;
						font-size: 12px;
						margin-left: 10px;
					}
				}

				.sell {
					display: flex;
					justify-content: space-between;
					font-size: 12px;
				}
			}
		}
	}
</style>